<template>
  <!-- zx 2021 7 19 -->
  <div>
    <el-card class="box-card">
      <div>
        <!-- 按钮 -->
        <div class="but">
          <el-button
            @click="preview"
            size="medium"
            class="saveBtn"
          >预览</el-button>
          <el-button
            class="btn"
            size="medium"
            @click="savaMessage"
          >保存</el-button>
          <el-button
            @click="deselect"
            size="medium"
            class="saveBtn"
          >取消</el-button>
        </div>
        <div class="boxSlider">
          <div class="one">
            <!-- 顶部面包屑导航 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>资源配置</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">宣传视频</a></el-breadcrumb-item>
            </el-breadcrumb>

          </div>

          <!-- 标题配置 -->
          <div class="video2">标题配置</div>
          <el-form
            ref="form"
            :model="form"
            label-width="120px"
            class="video3"
            label-position="left"
          >
            <el-form-item label="主标题：">
              <el-input
                maxlength="20"
                show-word-limit
                v-model="form.haeding"
              ></el-input>
            </el-form-item>
            <el-form-item label="副标题：">
              <el-input
                maxlength="200"
                show-word-limit
                :rows="5"
                type="textarea"
                v-model="form.subhead"
              ></el-input>
            </el-form-item>
            <div class="video5">动图配置</div>
            <el-form-item label="宣传动图：">
              <!-- <div class="head_img">
              <img
                :src='avatar'
                id="show"
                v-show="begin"
                class="video7"
              /> -->
              <!-- 图片地址动态绑定 -->

              <!-- <div
                class="caption"
                v-show="reveal"
              >
                <input
                  id="file"
                  ref="imgs"
                  type="file"
                  accept="image/*"
                  class="video6"
                  @change="handleFile"
                >
              </div> -->

              <!-- 删除 -->
              <!-- <div
                class="close"
                @click="closedBth"
                v-show="begin"
              ></div>
            </div> -->
              <!-- 删除 -->
              <div
                class="close"
                @click="closedBth"
                v-show="begin"
              ></div>
              <el-upload
                class="avatar-uploader"
                action="lei"
                :show-file-list="false"
                :http-request="addRequest"
                :on-change="headleChange"
                :disabled="authenStatusOne"
                accept="image/*"
              >
                <img
                  v-if="avatar"
                  :src="avatar"
                  class="avatar"
                >
                <div
                  class="caption"
                  v-show="reveal"
                >

                </div>

              </el-upload>
              <span class="hint">支持JPG、PNG、GIF格式，不超过3MB</span>
            </el-form-item>
            <div class="video5">视频配置</div>
            <el-form-item label="宣传视频：">
              <!-- <div class="head_img"> -->
              <!-- <video
                class="video7"
                ref="video"
                muted
                loop
                autoplay
                v-show="beginVideo"
              >
                <source
                  :src='pron'
                  type="video/mp4"
                />
              </video> -->
              <!-- 图片地址动态绑定 -->

              <!-- <div
                class="caption"
                v-show="revealVideo"
              >
                <input
                  id="fileVideo"
                  ref="imgsVideo"
                  type="file"
                  class="video6"
                  @change="handleVideo"
                >
              </div> -->

              <!-- 删除 -->
              <!-- <div
                class="close"
                @click="closedVideo"
                v-show="beginVideo"
              ></div> -->
              <!-- </div> -->
              <!-- 删除 -->
              <div
                class="close"
                @click="closedVideo"
                v-show="beginVideo"
              ></div>
              <el-upload
                class="avatar-uploader"
                action="lei"
                :show-file-list="false"
                :http-request="addRequestVideo"
                :on-change="headleChangeVideo"
                :disabled="authenStatusTwo"
                accept="video/mp4"
              >
                <video
                  class="video7"
                  ref="video"
                  muted
                  loop
                  preload="auto"
                  controls
                  v-show="beginVideo"
                >
                  <source
                    :src='pron'
                    type="video/mp4"
                  />
                </video>
                <div
                  class="caption"
                  v-show="revealVideo"
                >

                </div>
              </el-upload>
              <span class="hint">支持MP4格式，不超过15MB</span>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </el-card>
    <!-- 预览弹框 -->
    <div
      class="three"
      v-show="threeshow"
    >
      <div
        class="shut"
        @click="threeBtn"
      ></div>
      <div
        class="up"
        v-show="previewShow"
      >
        <div class="txt1">{{form.haeding }}</div>
        <div class="txt2">{{form.subhead}}</div>
        <img
          src="./open.png"
          class="img1"
          @click="skip"
        >
      </div>
      <img
        :src="avatar"
        class="middle"
        v-show="previewShow"
      >
      <video
        class="low"
        autoplay="autoplay"
        loop="loop"
        preload="auto"
        controls
        v-show="closeShow"
        ref="videoShow"
        muted
      >
        <source
          :src="pron"
          type="video/mp4"
        />
      </video>

    </div>
    <!-- 遮盖层 -->
    <div
      class="all"
      v-show="threeshow"
      @click="threeBtn"
    ></div>
  </div>
</template>
<script>
import { algin, getVideo, submitVideo, uploads, uploadsVideo } from '@/api/contact.js'
export default {
  data() {
    return {
      form: {
        haeding: '',
        subhead: "",
        picture: "",
      },
      haeding1: "",
      subhead1: "",
      imgUrl1: "",
      imgUrl: "",
      labelPosition: 'left',
      avatar: "",
      avatarLast: "",  // 图片上传失败返回上一次上传的图片
      pronLast: "",  // 视频上一次资源
      img: "",
      reveal: true,
      begin: false,
      beginVideo: false,
      revealVideo: true,
      pron: "",
      previewShow: false,
      threeshow: false,
      closeShow: false,
      avatar2: "",
      vudeo2: "",
      authenStatusOne: false,
      authenStatusTwo: false,



    }
  },
  mounted() {

    this.getVideoList()

  },
  methods: {

    closedBth() {
      this.begin = false
      this.avatar = ""
      this.reveal = true
      // this.$refs.imgs.type = 'file'
      this.authenStatusOne = false
    },
    // handleVideo(e) {
    //   const file = e.target.files[0] || e.dataTransfer.files[0]
    //   let URL = window.URL || window.webkitURL; // 获取当前域名地址
    //   // this.$refs.video.src = URL.createObjectURL(file);   // 拼接 URL + file 并转成 blob地址
    //   // this.$refs.videoShow.src = URL.createObjectURL(file);
    //   this.beginVideo = true
    //   this.revealVideo = false
    //   this.$refs.imgsVideo.type = 'text'
    // },
    closedVideo() {
      this.$refs.video.pause();
      this.beginVideo = false
      this.revealVideo = true
      this.pron = ""
      this.authenStatusTwo = false
    },
    // 图片样式
    // 获取图片路径
    headleChange(file, fileList) {
      this.avatar = URL.createObjectURL(file.raw);
      this.reveal = false
      this.begin = true
      this.authenStatusOne = true
    },

    addRequest(item) {
      // console.log(item);
      //验证图片格式大小信息
      const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png' ||
        item.file.type == 'image/gif';
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.lastImage()
        this.$message.error('上传图片只能是 JPG PNG  GIF格式!');
      }
      if (!isLt1M) {
        this.lastImage()
        this.$message.error('上传图片大小不能超过 3MB!');
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        const formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", "1");
        formData.append("categoryName", "宣传视频")
        formData.append("tagNames", "图片")
        uploads(formData).then(res => {
          console.log(res);
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data
            arrayImg.map((item, index) => {
              this.avatar = item.url
              this.avatarLast = item.url
              this.$message.success("图片地址获取成功")
            })
          } else {
            this.$message.error("网络请求失败")
          }
        })
      }
      this.authenStatusOne = true
    },
    // 加载图片失败，返回上一张图片
    lastImage() {
      if (this.avatarLast) {
        this.avatar = this.avatarLast
      } else {
        this.avatar = this.avatar2
      }
    },

    // 视频获取播放地址
    headleChangeVideo(file, fileList) {
      this.$refs.video.src = URL.createObjectURL(file.raw);
      this.$refs.videoShow.src = URL.createObjectURL(file.raw);
      this.authenStatusTwo = true
      this.beginVideo = true
      this.revealVideo = false
    },
    // 视频验证规则
    addRequestVideo(item) {
      const isJPG = item.file.type == 'video/mp4';
      // || item.file.type == 'video/ogg' ||
      //   item.file.type == 'video/flv' || item.file.type == 'video/wmv' || item.file.type == 'video/rmvb';
      const isLt1M = item.file.size / 1024 / 1024 < 15;
      if (!isJPG) {
        this.$message.error('上传视频是 mp4 格式!');
        this.videoLast()
      }
      if (!isLt1M) {
        this.videoLast()
        this.$message.error('上传视频大小不能超过 15MB!');
      }
      if (isJPG && isLt1M == true) {
        const fs = new FormData();
        fs.append("files", item.file);
        fs.append("mediaType", 3);
        fs.append("categoryName", "宣传视频")
        uploadsVideo(fs).then(res => {
          // console.log(res);
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data
            arrayImg.map((item, index) => {
              this.pron = item.url
              // console.log(this.pron);
              this.$message.success("视频地址获取成功")
              this.authenStatusTwo = true
            })
          } else {
            this.$message.error("网络请求失败")
          }
        })
      }
      this.authenStatusTwo = true
    },
    // 视频加载报错  返回上一次资源
    videoLast() {
      if (this.pronLast) {
        this.$refs.video.src = this.pron
        this.$refs.videoShow.src = this.pron
      } else {
        this.$refs.video.src = this.video2
        this.$refs.videoShow.src = this.video2

      }
    },
    // 预览
    preview() {
      this.threeshow = true
      this.previewShow = true
    },
    skip() {
      this.previewShow = false
      this.closeShow = true
    },
    threeBtn() {
      this.$refs.videoShow.pause();//暂停
      this.threeshow = false
      this.previewShow = false
      this.closeShow = false

    },
    // 获取列表数据
    async getVideoList() {
      const data = await getVideo()
      // console.log(data)
      if (data.status == 200) {
        if (data.data.msg == "success") {
          this.form.haeding = data.data.data.title
          this.form.subhead = data.data.data.subtitle
          this.avatar = data.data.data.gifUrl
          this.$refs.video.src = data.data.data.videoUrl
          this.$refs.videoShow.src = data.data.data.videoUrl
          this.beginVideo = true
          this.revealVideo = false
          this.begin = true
          this.reveal = false
          this.pron = this.$refs.video.src
          this.haeding1 = data.data.data.title
          this.subhead1 = data.data.data.subtitle
          this.avatar2 = data.data.data.gifUrl
          this.video2 = data.data.data.videoUrl
          this.authenStatusOne = true
          this.authenStatusTwo = true
        } else {
          this.$message.error('获取宣传视频失败');
        }

      }


    },


    // 保存数据
    async savaMessage() {
      if (this.avatar == "") {
        this.$message.error('图片地址获取中 请稍等！');
      } else if (this.pron == "") {
        this.$message.error('视频地址获取中 请稍等！');
      } else {
        if (this.form.haeding !== "" && this.form.subhead !== "" &&
          this.avatar !== "" && this.pron !== "") {
          const message = {
            title: this.form.haeding,
            subtitle: this.form.subhead,
            gifUrl: this.avatar,
            videoUrl: this.pron
          }
          const res = await submitVideo(message)
          // console.log(res);
          if (res.status == 200) {
            if (res.data.msg == "success") {
              this.$message.success('保存宣传视频成功')
              this.getVideoList()
            } else {
              this.$message.error('保存宣传视频失败');
            }

          }
        } else {
          this.$message.error('所有内容都要填写');
        }
      }

      this.authenStatusOne = true
      this.authenStatusTwo = true
    },
    // 取消
    deselect() {
      this.form.haeding = this.haeding1
      this.form.subhead = this.subhead1
      this.avatar = this.avatar2
      this.$refs.video.src = this.video2
      this.$refs.videoShow.src = this.video2
      this.begin = true
      this.reveal = false
      this.beginVideo = true
      this.revealVideo = false
      this.authenStatusOne = true
      this.authenStatusTwo = true
    }

  },




}
</script>
<style lang="scss" scoped>
.boxSlider {
  // overflow: auto;
}
.box-card {
  position: relative;
  // width: 100%;
  margin-top: 80px;
  margin-left: 24px;
  // padding-left: 24px;
  padding-right: 24px;
  margin-right: 24px;
  // padding-top: 18px;
  // overflow: auto;
  z-index: 11;
  // .but {
  //   // width: 352px;
  //   margin-top: 0px;
  //   margin-left: 1056px;
  //   // height: 32px;

  //   /deep/ .el-button {
  //     margin-right: 16px;
  //     margin-left: 0;
  //     height: 32px;
  //     padding-top: 0;
  //     padding-bottom: 0;
  //     line-height: 32px;
  //   }
  // }
}
// 原先按钮
.but {
  // margin-top: 32px;
  position: absolute;
  float: left;
  right: 24px;
  height: 32px;
  margin: 0;
  top: 46px;
  /deep/ .el-button {
    margin-right: 0;
    margin-left: 16px;
    height: 32px;
  }
  .btn {
    background-color: #004fe0;
    color: #fff;
    border: 1px solid #004fe0;
  }
}
.btn {
  background-color: #004fe0;
  color: #fff;
  border: 1px solid #004fe0;
  // margin-right: 16px;
}
.el-breadcrumb {
  // margin-left: 24px;
  // margin-top: 18px;
  font-size: 20px;
  line-height: 29px;
  height: 29px;
}
.el-textarea {
  width: 600px;
}
/deep/.el-card__body {
  padding: 0 !important;
}

.video2 {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  margin-left: 24px;
  margin-top: 50px;
}
.el-form-item {
  margin-top: 36px;
}
.video3 {
  margin-top: 32px;
  font-size: 14px;
  margin-left: 24px;
}
.video4 {
  width: 600px;
}
.video5 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 56px;
  text-align: left;
}
.video6 {
  width: 70px;
  height: 70px;
  opacity: 0;
}
.head_img {
  width: 416px;
  height: 236px;
  border: 1px solid #dcdfe6;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/.avatar-uploader .el-upload {
  background: #f2f2f2;
  width: 416px;
  height: 236px;
  border: 1px solid #dcdfe6;
  position: relative;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  line-height: 236px;
  background: #f2f2f2;
  width: 416px;
  height: 236px;
  text-align: center;
}
.avatar {
  width: 416px;
  height: 236px;
  display: block;
}

.caption {
  position: absolute;
  top: 82px;
  left: 165px;

  width: 70px;
  height: 70px;
  background: url("./Icon／.png") no-repeat center center;
  background-size: 100% 100%;
}
.close {
  width: 40px;
  height: 40px;
  z-index: 8;
  background: url("./icon.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: -20px;
  left: 391px;
}
.el-input {
  width: 600px;
  height: 40px;
  position: absolute;
  left: 0;
  // margin-top: 16px;
}
.hiddenInput {
  display: none;
}
.video7 {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.one {
  margin-left: 24px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
}
.hint {
  user-select: none;
  position: absolute;
  color: #b7b7b7;
  font-size: 14px;
  height: 0;
  bottom: 15px;
}

.el-input {
  width: 600px;
  height: 40px;
  position: absolute;
  left: 0;
  // margin-top: 16px;
}
.hiddenInput {
  display: none;
}

.three {
  width: 1152px;
  height: 648px;
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // margin-top: -460px; /* 高度的一半 */
  // margin-left: -657px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: #000;
  .shut {
    z-index: 23;
    width: 50px;
    height: 50px;
    background: url("./icon.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: -35px;
    left: 1117px;
  }
  .up {
    position: absolute;

    top: 192px;
    left: 216px;
    .txt1 {
      color: #fff;
      font-size: 29px;
    }
    .txt2 {
      color: #fff;
      font-size: 14px;
      margin-top: 13px;
      width: 676px;
    }
    .img1 {
      width: 60px;
      height: 60px;
      margin-top: 24px;
    }
  }
  .middle {
    width: 100%;
    height: 100%;
  }
  .low {
    width: 1152px;
    height: 648px;
    object-fit: fill;
  }
}
.all {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 22;
}
.saveBtn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  color: #004fe0;
  border: 1px solid #004fe0;
  // margin-right: 16px;
}
</style>